<div class="box">
  <div class="box-header with-border">
   <a class="btn btn-success btn-sm"> <span class="glyphicon glyphicon-plus"></span>创建</a>
    <div class="box-tools">
      <div class="input-group input-group-sm" style="width: 150px;margin-top: 7px;">
        <input type="text" name="table_search" class="form-control pull-right" placeholder="搜索">

        <div class="input-group-btn">
          <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
        </div>
      </div>
    </div>
  </div>
  <!-- /.box-header -->
  <div class="box-body">
    <table class="table table-bordered">
      <tr>
        <th style="width: 10px">#</th>
        <th>名称</th>
        <th>价格</th>
        <th>评级</th>
        <th>操作</th>
      </tr>
      <tr *ngFor="let stock of stocks ; let i = index;">
        <td>{{i+1}}</td>
        <td>{{stock.name}}</td>
        <td>{{stock.price}}</td>
        <td><app-stars [rating]="stock.rating" ></app-stars></td>
        <td>
          <a class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-pencil"></span> 修改</a>
          <a class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span> 删除</a>
        </td>


      </tr>

    </table>
  </div>
  <div class="box-footer clearfix">
    <ul class="pagination pagination-sm no-margin pull-right">
      <li><a href="#">&laquo;</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>
  </div>
</div>
